<template>
    <div class="home">
        <el-row :gutter="20" class="home-total-wrapper">
            <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" style="margin-bottom:20px">
                <el-card style="height: 180px" shadow="never">
                    <div class="home-total-header">
                        <span class="header-title">总收入额</span>
                        <span class="header-icon"><i class="el-icon-warning-outline"></i></span>
                    </div>
                    <div class="home-total-count">
                        <span class="symbol">¥ </span>
                        <span>{{ thousands(123000) }}</span>
                    </div>
                    <div class="home-total-content">
                        <div class="dayOnday-wrapper">
                            <div class="dayOnday-row">
                                <span>周同比</span>
                                <span>12%</span>
                                <span class="el-icon-top"></span>
                            </div>
                            <div class="dayOnday-row">
                                <span>日同比</span>
                                <span>11%</span>
                                <span class="el-icon-bottom"></span>
                            </div>
                        </div>
                    </div>
                    <div class="home-total-detail">
                        <span class="total-detail-label">日收入额</span>
                        <span class="total-detail-value"><span class="symbol">¥ </span>{{ thousands(2000) }}</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" style="margin-bottom:20px">
                <el-card style="height: 180px" shadow="never">
                    <div class="home-total-header">
                        <span class="header-title">总平均单量/店铺（间）</span>
                        <span class="header-icon"><i class="el-icon-warning-outline"></i></span>
                    </div>
                    <div class="home-total-count">
                        <span class="symbol"></span>
                        <span>{{ thousands(32343) }}</span>
                    </div>
                    <div class="home-total-content"></div>
                    <div class="home-total-detail">
                        <span class="total-detail-label">日平均单量/店铺（间）</span>
                        <span class="total-detail-value"><span class="symbol"></span>{{ thousands(230) }}</span>
                    </div>
                </el-card></el-col
            >
            <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" style="margin-bottom:20px">
                <el-card style="height: 180px" shadow="never">
                    <div class="home-total-header">
                        <span class="header-title">总店铺（间）</span>
                        <span class="header-icon"><i class="el-icon-warning-outline"></i></span>
                    </div>
                    <div class="home-total-count">
                        <span class="symbol"></span>
                        <span>{{ thousands(12343) }}</span>
                    </div>
                    <div class="home-total-content"></div>
                    <div class="home-total-detail">
                        <span class="total-detail-label">日店铺（间）</span>
                        <span class="total-detail-value"><span class="symbol"></span>2000</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" style="margin-bottom:20px">
                <el-card style="height: 180px" shadow="never">
                    <div class="home-total-header">
                        <span class="header-title">总订单量</span>
                        <span class="header-icon"><i class="el-icon-warning-outline"></i></span>
                    </div>
                    <div class="home-total-count">
                        <span class="symbol"></span>
                        <span>{{ thousands(77323233) }}</span>
                    </div>
                    <div class="home-total-content"></div>
                    <div class="home-total-detail">
                        <span class="total-detail-label">日订单量</span>
                        <span class="total-detail-value"><span class="symbol">¥</span>2000</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <ChartsLoan :height="height" :resizeRandomId="resizeRandomId"></ChartsLoan>
        <ChartsExpenditure height="400px" :resizeRandomId="resizeRandomId"></ChartsExpenditure>
    </div>
</template>

<script>
import lodash from 'lodash';
import ChartsLoan from './ChartsLoan';
import ChartsExpenditure from './ChartsExpenditure';
import variables from '@/styles/variables.scss';
import {thousands} from '@/utils/utils';
const heightHomeCard = variables.heightHomeCard;

export default {
    name: 'home',
    components: {
        ChartsLoan,
        ChartsExpenditure
    },
    data() {
        return {
            height: heightHomeCard, // '280px',
            // height: '280px', // '280px',
            resizeRandomId: `abc${Math.random()}`
        };
    },
    computed: {
        hasChartsResize() {
            return this.$store.getters['app/hasChartsResize'];
        }
    },
    watch: {
        hasChartsResize() {
            this.resizeRandomId = `abc${Math.random()}`;
        }
    },
    mounted() {
        this.debounced = lodash.debounce(this.handleChartsUpdate, 250, {maxWait: 5000});
        // https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
        window.addEventListener('resize', this.debounced, {passive: true});
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.debounced);
        this.debounced.cancel();
    },
    methods: {
        thousands,
        handleChartsUpdate() {
            this.resizeRandomId = `abc${Math.random()}`;
        }
    }
};
</script>

<style lang="scss">
@import '@/styles/variables.scss';
.head-title {
    padding: 0px 0 15px 0;
}
.home {
    .el-card {
        overflow: unset;
    }
    // .el-card__body {
    //     padding: 0 5px;
    // }
    .box-card {
        // height: 220px;
        position: relative;
        .isFullScreen {
            position: absolute;
            right: 15px;
            top: 15px;
            font-size: $--font-size-14;
            z-index: 10000;
            cursor: default;
            transition: all 0.2s ease;
            &:hover {
                color: $--color-primary;
                opacity: 1;
            }
            &:active {
                opacity: 0.7;
            }
            .iconfont {
                font-weight: 600;
                font-size: $--font-size-14;
            }
        }
    }
}
</style>
<style lang="scss" scoped>
.home {
    padding: 0 20px;
    .home-total-wrapper {
        ::v-deep {
            .el-card {
                border-radius: 0;
                border: none;
            }
            .el-card__body {
                display: flex;
                flex-flow: column nowrap;
                height: inherit;
                padding: 20px 20px 8px 20px;
                box-sizing: border-box;
            }
        }
    }
}
.home-total-wrapper {
    .home-total-header {
        display: flex;
        flex-flow: row nowrap;
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        line-height: 22px;
        .header-icon {
            margin-left: auto;
            cursor: pointer;
        }
    }
    .home-total-count {
        font-size: 30px;
        line-height: 38px;
        color: rgba(0, 0, 0, 0.85);
    }
    .home-total-content {
        flex: 1;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-end;
        .dayOnday-wrapper {
            display: flex;
            flex-flow: row wrap;
            .dayOnday-row {
                display: flex;
                align-items: center;
                span:first-child {
                    margin-right: 8px;
                    font-size: 14px;
                    line-height: 22px;
                }
                span:nth-child(2) {
                    font-size: 14px;
                    line-height: 22px;
                }
                span:last-child {
                    font-size: 10px;
                    margin-left: 4px;
                    font-weight: 700;
                }
                span.el-icon-top {
                    color: #f00;
                }
                span.el-icon-bottom {
                    color: rgb(82, 196, 26);
                }
            }
            .dayOnday-row:first-child {
                margin-right: 16px;
            }
        }
    }
    .home-total-detail {
        margin-top: 12px;
        padding-top: 8px;
        font-size: 14px;
        line-height: 22px;
        box-sizing: border-box;
        border-top: 1px solid #f0f0f0;
        color: rgba(0, 0, 0, 0.85);
        .total-detail-label {
            display: inline-block;
            margin-right: 8px;
        }
    }
}
</style>
